<template>
  <div class="container">
    <div
      :style="{
        width: '66%',
        height: '72%',
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        position: 'fixed',
        zIndex: '999',
        display: 'flex',
        borderRadius: '16px',
      }"
    >
      <div class="left">
        <img src="@/assets/images/left2.png" width="450" alt="" />
      </div>

      <div class="right">
        <div class="title">
          <n-space vertical :size="35">
            <h1>{{ setting.title }}</h1>

            <p>欢迎来到 {{ setting.title }}</p>
          </n-space>
        </div>

        <div class="form">
          <n-form ref="formRef" :model="user" :rules="rules" size="large">
            <n-form-item path="username">
              <n-input
                placeholder="请输入用户名"
                style="width: 90%; height: 45px"
                v-model:value="user.username"
                @keydown.enter.prevent
              >
                <template #prefix>
                  <n-icon :size="25" :component="Accessibility20Regular" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input
                show-password-on="mousedown"
                placeholder="请输入密码"
                style="width: 90%; height: 45px"
                v-model:value="user.password"
                type="password"
                @input="handlePasswordInput"
                @keydown.enter.prevent
              >
                <template #prefix>
                  <n-icon :size="25" :component="ShieldLock20Regular" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="code">
              <n-input
                placeholder="请输入验证码"
                style="width: 90%; height: 45px"
                v-model:value="user.code"
                @keydown.enter.prevent
              >
                <template #prefix>
                  <n-icon :size="25" :component="BookNumber20Regular" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="button">
              <n-button
                @click="doLogin"
                type="primary"
                :loading="loading"
                style="
                  letter-spacing: 5px;
                  width: 90%;
                  height: 45px;
                  opacity: 1;
                "
              >
                登录
              </n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useBingStore } from "@/stores/models/bing";
import { useTokenStore } from "@/stores/models/token";
import { useMessage } from "naive-ui";
import setting from "@/setting";
import {
  ShieldLock20Regular,
  Accessibility20Regular,
  BookNumber20Regular,
} from "@vicons/fluent";
import router from "@/router";

const bingStore = useBingStore();
const tokenStore = useTokenStore();
const message = useMessage();
const formRef = ref(null);
const user = ref({
  username: "admin",
  password: "admin123",
  code: "",
});
const loading = ref(false);

onMounted(() => {});

const doLogin = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      if (
        user.value.username === "admin" &&
        user.value.password === "admin123"
      ) {
        loading.value = true;
        tokenStore.token = "jsdklfdsjoifjeoijflk465132dsfsd";
        //定时器
        setTimeout(() => {
          loading.value = false;
          router.push("/");
          message.success("登录成功");
        }, 1000);
      }
    }
  });
};

//表单验证
const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
};
</script>
<style scoped lang='scss'>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  flex: 1;
  border-radius: 16px 0 0 16px;
  z-index: 9999;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>